<template>
<div class="vip-list views-container">
    <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <el-button size="small" type="primary" @click="$refs.chooseFiles.toggle()">创建微信图片素材</el-button>
            <el-button size="small" @click="syncMaterial(syncMaterialCallBack,'image')">同步微信图片素材</el-button>
        </div>
        <div class="wlm-table-content" style="position: relative;">
            <channel-source-loding :progressNum="progressNum" :isLoading="syncMaterialLoding"></channel-source-loding>
            <el-row>
                <el-col :span="4" v-for="(item, index) in tableFormatData.userTable.tableData" :key="index">
                    <div class="file-box">
                        <div class="file-item">
                        <channel-list-header :item="item"></channel-list-header>
                        <div class="file-content">
                            <div class="file-source img-center" v-bind:style="{'background-image':`url(${item.attachment})`}"></div>
                        </div>
                        <channel-list-footer>
                          <template slot="append">
                            <div
                              class="del-btn pointer"
                              @click="delTableItem(item.id)"
                            ><i class="el-icon-delete"></i></div>
                          </template>
                        </channel-list-footer>
                    </div>
                    </div>
                </el-col>
                <el-col :span="24" v-if="tableFormatData.userTable.tableData.length == 0">
                   <div class="flex-row  flex-justify-c flex-align-c" style="min-height:400px;color:#c3c3c3;font-size:18px;"><i class="el-icon-search" style="margin-right:10px;"></i><span>暂无素材</span></div>
                </el-col>
            </el-row>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  getMaterialList,
  deleteMaterial
} from '@/api/channel'
import ChooseFiles from '@/components/ChooseFiles/index'
import mixins from '@/mixins/mixins'
import channelSource from './mixins/channelSource'
import channelListHeader from './components/channelListHeader'
import channelListFooter from './components/channelListFooter'
import channelSourceLoding from './components/channelSourceLoding'
export default {
  mixins: [mixins.getters('Table'), channelSource],
  name: 'WeChatPublicImageSource',
  components: {
    ChooseFiles,
    channelListHeader,
    channelListFooter,
    channelSourceLoding
  },
  computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    }
  },
  data() {
    return {
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image',
        uploadConfig: {
          params: {
            mode: 'perm'
          }
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: getMaterialList,
            delList: deleteMaterial
          },
          tableData: [],
          files: {
            type: 'image'
          },
          change: {

          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  @import "~@/views/channel/styles/source.scss";
</style>

